<template>
  <div class="div">
    <div class="top">
      <van-search
        shape="round"
        background="rgba(243, 112, 76,.5)"
        placeholder="请输入搜索关键词"
      />
    </div>
    <van-row class="gundong">
      <!-- 公告滚动 -->
      <van-notice-bar
        left-icon="volume-o"
        right-icon="arrow"
        text="尊贵的会员您好，欢迎光临本平台，这里有您意想不到的惊喜。"
      >
      </van-notice-bar>
      <van-icon name="arrow" />
    </van-row>
    <van-swipe :autoplay="3000" class="swipe" indicator-color="#fff">
      <van-swipe-item class="item">
        <img src="~@/views/home/image/lunbo.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="~@/views/home/image/lunbo.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="~@/views/home/image/lunbo.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="~@/views/home/image/lunbo.png" />
      </van-swipe-item>
    </van-swipe>
    <div class="platform">
      <!--  平台导航栏 -->
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">热门平台</span>
        </template>
        <template #default>
          <span @click="$router.push('/platform')">更多平台</span>
        </template>
        <template #right-icon>
          <van-icon
            name="arrow"
            class="search-icon"
            @click="$router.push('/platform')"
          />
        </template>
      </van-cell>
      <!-- 平台九宫格 -->
      <van-grid :column-num="3" class="grid">
        <van-grid-item
          v-for="value in platformList"
          :key="value.id"
          @click="$router.push('/Settlement')"
        >
          <!-- <van-grid-item v-for="value in 6" :key="value" @click="$router.push('/Settlement')"> -->
          <img :src="value.png" alt="" />
          <div class="PTtext">
            <span class="p">{{ value.name }}</span>
            <span class="s">{{ value.orders }}</span>
          </div>
          <div class="icon">
            <van-icon name="arrow" color="red" />
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 实时收益 -->
    <div class="order">
      <van-cell title="实时收益" />

      <van-row v-for="index in 6" :key="index">
        <van-col><img src="~@/views/home/image/touxiang.png" alt="" /></van-col>
        <van-col class="message"
          >恭喜用户<span class="name"> abc**** </span>在<span class="add">
            亚马逊 </span
          >收益<span class="money">200.00</span>元</van-col
        >
      </van-row>
    </div>
  </div>
</template>

<script>
import { gitSixP } from "@/api/platform";
export default {
  data() {
    return {
      platformList: [],
    };
  },
  created() {
    this.getSixP();
  },

  methods: {
    async getSixP() {
      const list = await gitSixP();
      this.platformList = list.data;
    },
  },
};
</script>

<style lang="less" scoped>
.div {
  padding-top: 600px;
  padding-bottom: 100px;
  background-color: #f0f0f0;
}
//搜索栏
.top {
  .van-search {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 20;
  }
}
//轮播图
.swipe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 600px;
  z-index: 10;

  .item {
    height: 600px;
  }
  /deep/.van-swipe__indicators {
    position: absolute;
    left: 130px;
    bottom: 120px;
  }
}
.swipe img {
  width: 100%;
  height: 100%;
}

//消息通知
.gundong {
  .van-notice-bar {
    position: fixed;
    top: 520px;
    left: 0;
    z-index: 20;
    width: 91%;
    padding: 0 0 0 20px !important;
    background-color: rgba(255, 255, 255, 0.5);
    background: blur(10px);
    /deep/.van-notice-bar__content {
      color: #5c5d60;
    }
  }
  .van-icon-arrow {
    position: fixed;
    top: 520px;
    right: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 80px;
    font-size: 30px;
    color: #f36949;
    background-color: #f9c18d;
    opacity: 0.8;
  }
}

// 平台导航
.platform {
  margin-top: 56px;
  margin-bottom: 22px;
  // padding: 0 30px;

  .van-cell__title {
    text-align: start;
    font-size: 44px;
    color: #5c5d60;
  }
  .van-cell {
    background-color: #f0f0f0;
    padding: 0 36px;
  }
  .van-cell__value {
    color: #000;
  }

  .search-icon {
    font-size: 30px;
    line-height: inherit;
    color: #fa7d22;
  }
}
.grid {
  margin-top: 22px;
  padding: 0 20px;
  /deep/.van-grid-item__content {
    padding: 0 !important;
    position: relative;
    background-color: #f0f0f0;
    // 文本样式
    .PTtext {
      position: absolute;
      left: 30px;
      top: 110px;
      display: flex;
      flex-direction: column;
      color: #fff;

      .p {
        font-size: 38px;
      }
      .s {
        font-size: 20px;
      }
    }
    // 图标样式
    .icon {
      position: absolute;
      right: 30px;
      bottom: 40px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 800;
      background-color: #fff;
      border-radius: 50%;
      i {
        margin-left: 5px;
      }
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 订单
.order {
  .van-cell {
    background-color: #f0f0f0;
    padding: 0 36px;
    margin-bottom: 40px;
    .van-cell__title {
      text-align: start;
      font-size: 44px;
      color: #5c5d60;
    }
  }
  .van-row {
    padding: 0 36px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    img {
      width: 80px;
    }
    .message {
      height: 80px;
      font-size: 30px;
      background-color: #fff;
      width: 580px;
      line-height: 80px;
      border-radius: 0 20px 20px;
      color: #5c5d60;
      .add {
        color: #000;
      }
      .money {
        color: red;
      }
    }
  }
}
</style>
